<template>
  <div @click="goDetails" style="cursor: pointer;">
    <el-card class="box-card" style="margin-bottom: 20px">
      <div slot="header" class="clearfix">
        <el-row :gutter="10" style="display: flex;align-items: center;">
          <el-col :span="6"><h3>标题：{{ comments.title }}</h3></el-col>
          <el-col :span="1" :offset="14"><strong>作者：</strong></el-col>
          <el-col :span="1">
            <el-avatar :src="comments.authorAvatar"/>
          </el-col>
          <el-col :span="2">
            <strong>{{ comments.authorName }}</strong>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <el-row :gutter="10" style="display: flex;align-items: center;">
                  <el-col :span="1">
                    <el-avatar :src="userData.avatar"/>
                  </el-col>
                  <el-col :span="4">
                    <strong>{{ userData.name }} ✍</strong>
                  </el-col>
                </el-row>
              </div>
              <div class="commentBox">
                <el-row
                    :gutter="10"
                    v-for="(item, index) in comments.commentData"
                    :key="index"
                    style="margin-bottom: 10px;"
                >
                  <el-col :span="23" :offset="1">
                    <el-card class="box-card" body-style="padding: 10px;">
                      <div class="commentList">
                        <span class="el-icon-chat-dot-square"> {{ item.content }}</span>
                        <span> 发表时间： {{ item.lastModified | timeFormat }}</span>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>

import Filters from '@/tools/Filters'

export default {
  name: "MyCommList",
  filters:{
    timeFormat: Filters.timeFormat
  },
  props: {
    comments: {
      type: Object,
      default() {
        return {}
      }
    },
    userData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    goDetails(){
      this.$router.push(`/article/${this.comments.blogId}`)
    }
  }
}
</script>

<style scoped>
h3 {
  margin: 0;
}

div.commentBox {
  overflow: hidden;
  height: 100px;
}

div.commentBox::-webkit-scrollbar {
  width: 2px;
}

div.commentBox:hover {
  overflow-y: scroll;
}

div.commentList {
  display: flex;
  justify-content: space-between;
}
</style>
